<!-- 在线考试 -->
<template>
  <el-dialog title="考试结果" :visible.sync="dialogVisible" width="80%" :before-close="handleClose"
    :modal-append-to-body="true" :append-to-body="true">
    <div  style="
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: auto;
    max-height: 70vh
      ">
      <div>
        <h1>{{ examinationPlanName }}</h1>
      </div>
      <div>
        <h3>得分：{{ totalScore }}</h3>
      </div>
      <div style="display: flex; flex-direction: column;width:80%">
        <div v-if="radioList && radioList.length > 0">
          <el-divider content-position="left"><el-tag>单选题</el-tag></el-divider>
          <div v-for="(item, index) in radioList" :key="index">
            <div>
              <h3>{{ item.questionName }}</h3>
            </div>
            <div v-for="(item2, index2) in item.questionAnswerList" :key="index2">
              <div style="margin-top: 10px">
                <span>{{ item2.questionAnswerOption }}</span>
                <span style="margin-left: 10px">{{
                  item2.questionAnswerName
                }}</span>
              </div>
            </div>
            <div style="
                display: flex;
                flex-direction: row;
                margin-top: 30px;
                width: 300px;
                justify-content: space-between;
              ">
              <div style="color: #d43030">
                你的选择： {{ item.chooseAnswer }}
              </div>
              <div style="color: #43cf7c">
                正确答案： {{ item.rightAnswer }}
              </div>
            </div>
          </div>
        </div>
        <div v-if="judgmentList && judgmentList.length > 0">
          <el-divider content-position="left"><el-tag>判断题</el-tag></el-divider>
          <div v-for="(item, index) in judgmentList" :key="index">
            <div>
              <p>{{ item.questionName }}</p>
            </div>
            <div v-for="(item2, index2) in item.questionAnswerList" :key="index2">
              <div style="margin-top: 10px">
                <span>{{ item2.questionAnswerOption }}</span>
                <span style="margin-left: 10px">{{
                  item2.questionAnswerName
                }}</span>
              </div>
            </div>
            <div style="
                display: flex;
                flex-direction: row;
                margin-top: 30px;
                width: 300px;
                justify-content: space-between;
              ">
              <div style="color: #d43030">
                你的选择： {{ item.chooseAnswer }}
              </div>
              <div style="color: #43cf7c">
                正确答案： {{ item.rightAnswer }}
              </div>
            </div>
          </div>
        </div>

        <div v-if="multipleList && multipleList.length > 0">
          <el-divider content-position="left"><el-tag>多选题</el-tag></el-divider>
          <div v-for="item in multipleList" :key="item.questionId">
            <div>
              <p>{{ item.questionName }}</p>
            </div>
            <div v-for="(item2, index2) in item.questionAnswerList" :key="index2">
              <div style="margin-top: 10px">
                <span>{{ item2.questionAnswerOption }}</span>
                <span style="margin-left: 10px">{{
                  item2.questionAnswerName
                }}</span>
              </div>
            </div>
            <div style="
                display: flex;
                flex-direction: row;
                margin-top: 30px;
                width: 300px;
                justify-content: space-between;
              ">
              <div style="color: #d43030">
                你的选择： {{ item.chooseAnswer }}
              </div>
              <div style="color: #43cf7c">
                正确答案： {{ item.rightAnswer }}
              </div>
            </div>
          </div>
        </div>

        <div v-if="fillList && fillList.length > 0">
          <el-divider content-position="left"><el-tag>填空题</el-tag></el-divider>
          <div v-for="item in radioList" :key="item.questionId">
            <div>
              <p>{{ item.questionName }}</p>
            </div>

            <div v-for="item2 in item.questionAnswerList" :key="item2.questionAnswerId">
              <div style="margin-top: 10px">
                <span>{{ item2.questionAnswerOption }}</span>
                <span style="margin-left: 10px">{{
                  item2.questionAnswerName
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div v-if="shortList && shortList.length > 0">
          <el-divider content-position="left"><el-tag>简答题</el-tag></el-divider>
          <div v-for="item in radioList" :key="item.questionId">
            <div>
              <p>{{ item.questionName }}</p>
            </div>

            <div v-for="item2 in item.questionAnswerList" :key="item2.questionAnswerId">
              <div style="margin-top: 10px">
                <span>{{ item2.questionAnswerOption }}</span>
                <span style="margin-left: 10px">{{
                  item2.questionAnswerName
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { getSimulateRecord, getTrainRecordInfo } from "@/api/train/index.js";

export default {
  data() {
    return {
      dialogVisible: false,
      radioList: [],
      multipleList: [],
      judgmentList: [],
      fillList: [],
      shortList: [],
      examinationPlanName: "",
      totalScore: 0,
    };
  },
  computed: {},
  created() { },
  methods: {
    show(row, type) {
      console.log(row);
      this.dialogVisible = true;
      if (type == 1) {
        //获取打分结果
        getSimulateRecord({
          trainSimulateRecordId: row,
        }).then((res) => {
          this.radioList = res.data.radioList;
          this.multipleList = res.data.multipleList;
          this.judgmentList = res.data.judgmentList;
          this.fillList = res.data.fillList;
          this.shortList = res.data.shortList;
          this.examinationPlanName = res.data.examinationPlanName;
          this.totalScore = res.data.totalScore;
        });
      } else {
        //获取打分结果
        getTrainRecordInfo({
          trainRecordId: row,
        }).then((res) => {
          this.radioList = res.data.radioList;
          this.multipleList = res.data.multipleList;
          this.judgmentList = res.data.judgmentList;
          this.fillList = res.data.fillList;
          this.shortList = res.data.shortList;
          this.examinationPlanName = res.data.examinationPlanName;
          this.totalScore = res.data.totalScore;
        });
      }
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style>
.my-radio {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20rpx 25rpx;
  box-sizing: border-box;
  border-width: 100px;
  border-color: red;
  margin-top: 10rpx;
}

.my-boder-color-right {
  box-sizing: border-box;
  border: 1rpx solid #5db883;
  background-color: rgba(93, 184, 131, 0.2);
}

.my-boder-color-error {
  box-sizing: border-box;
  border: 1rpx solid #ffe9ea;
  background-color: rgba(255, 233, 234, 0.2);
}
</style>
